<template>
  <div class="app-container">
    <!-- :stretch="true"  选项卡平铺 -->
    <el-tabs v-model="essActive" style="height: 100%;" @tab-click="tabClick">
      <el-tab-pane label="商品入库上传" name="0" style="height: 100%;overflow-y: auto;">
        <ess-take-stock-index ref="essTakeStockIndexRef"/>
      </el-tab-pane>
<!--      <el-tab-pane label="商品采购" name="1" style="height: 100%;overflow-y: auto;">
        <ess-purchase-index ref="essPurchaseIndexRef"/>
      </el-tab-pane>
      <el-tab-pane label="商品采购退货" name="2">
        <ess-purchase-undo-index ref="essPurchaseUndoIndexRef"/>
      </el-tab-pane>-->
      <el-tab-pane label="商品销售" name="3">
        <ess-sale-index ref="essSaleIndexRef"/>
      </el-tab-pane>
      <el-tab-pane label="商品销售退货" name="4">
        <ess-sale-undo-index ref="essSaleUndoIndexRef"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script lang="ts">
export default {
  name: "Ess"
}
</script>
<script setup lang="ts">
import essTakeStockIndex from '@/views/msip/ess/takeStock.vue';
import essPurchaseIndex from './purchase.vue';
import essPurchaseUndoIndex from './purchaseUndo.vue';
import essSaleIndex from './sale.vue'
import essSaleUndoIndex from './saleUndo.vue'

const {proxy} = getCurrentInstance() as any;
const essActive = ref('0')

const essTakeStockIndexRef = ref()
const essPurchaseIndexRef = ref()
const essPurchaseUndoIndexRef = ref()
const essSaleIndexRef = ref()
const essSaleUndoIndexRef = ref()

/**
 * tab页点击事件
 * @param obj
 */
function tabClick(obj: any) {
  debugger
  const objThis = toRaw(obj)
  if (objThis.props.name === "0") {
    essTakeStockIndexRef.value.handleQuery()
  } else if (objThis.props.name === "1") {
    essPurchaseIndexRef.value.handleQuery()
  } else if (objThis.props.name === "2") {
    essPurchaseUndoIndexRef.value.handleQuery()
  } else if (objThis.props.name === "3") {
    essSaleIndexRef.value.handleQuery()
  } else if (objThis.props.name == "4") {
    essSaleUndoIndexRef.value.handleQuery()
  }
}

</script>

<style scoped>
:deep(.el-tabs__item) {
  min-width: 200px;
  height: 30px;
}

:deep(.el-tabs__content) {
  height: calc(100% - 30px);
}

:deep(.el-tabs__nav-scroll) {
  background-color: #ffffff;
}

:deep(.el-tabs__header) {
  margin: 0 0 0px;
  box-shadow: 0 0 18px 0 #878787;
}
</style>
